<template>
  <div class="action-buttons">
    <div class="buttons-container">
      <!-- 原有的底部按钮 -->
      <div class="button-group main-buttons">
        <el-button 
          @click="$emit('show-author')" 
          class="action-btn"
          :disabled="!buttonsEnabled"
        >作者</el-button>
        <el-button 
          @click="$emit('show-filter')" 
          class="action-btn"
          :disabled="!buttonsEnabled"
        >过滤</el-button>
        <el-button 
          @click="$emit('show-settings')" 
          class="action-btn"
          :disabled="!buttonsEnabled"
        >设置</el-button>
        <el-button 
          @click="$emit('show-instructions')" 
          class="action-btn"
        >说明</el-button>
      </div>
      
      <!-- 新增的掉落管理按钮 -->
      <div class="button-group drop-buttons">
        <el-button 
          @click="$emit('clear-items')" 
          class="action-btn"
          :disabled="!isRunning || !buttonsEnabled"
        >
          清除掉落面板
        </el-button>
        <el-button 
          @click="$emit('show-total-drops')" 
          class="action-btn"
          type="primary"
          :disabled="!buttonsEnabled"
        >
          查看总掉落
        </el-button>
      </div>

      <!-- 新增：简洁模式切换按钮 -->
      <div class="button-group simple-mode-button">
        <el-button 
          @click="$emit('toggle-simple-mode')" 
          class="action-btn simple-mode-btn"
          :type="isSimpleMode ? 'warning' : 'success'"
          :disabled="!buttonsEnabled"
        >
          {{ isSimpleMode ? '关闭简洁模式' : '开启简洁模式' }}
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    isRunning: {
      type: Boolean,
      default: false
    },
    buttonsEnabled: {
      type: Boolean,
      default: false
    },
    isSimpleMode: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<style scoped>
.action-buttons {
  width: 100%;
  padding: 10px 0;
}

.buttons-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.button-group {
  display: flex;
  gap: 8px;
  width: 100%;
}

.main-buttons {
  justify-content: space-between;
}

.drop-buttons {
  justify-content: space-between;
}

.action-btn {
  flex: 1;
  min-width: 0;
  text-align: center;
}

/* 确保所有按钮等宽 */
.main-buttons .action-btn,
.drop-buttons .action-btn {
  flex: 1;
  max-width: calc(25% - 6px);
}

.drop-buttons .action-btn {
  max-width: calc(50% - 4px);
}

/* 简洁模式按钮单独样式 - 修复方案 */
.simple-mode-button {
  justify-content: center;
}

/* 关键：覆盖父级的 flex:1 并设置固定宽度 */
.simple-mode-button .action-btn {
  flex: none !important; /* 覆盖 flex:1 */
  width: 50% !important; /* 设置固定宽度 */
  max-width: 50% !important;
}

/* 或者使用更具体的选择器 */
.buttons-container .button-group.simple-mode-button .el-button.action-btn {
  flex: none;
  width: 50%;
  max-width: 50%;
}
</style>